<template>
<div class="juheh5-reg_account">
    <div class="account-header">
        一键注册
    </div>
    <div class="account-content">
        <div style="text-align: center;">
            <div class="fast-reg-box">
                <div class="fast-reg-account">
                    <div class="account-label">账号：</div>
                    <div class="account-text">{{ account }}</div>
                </div>
                <div class="fast-reg-password">
                    <div class="password-label">密码：</div>
                    <div class="password-text">{{ password }}</div>
                </div>
            </div>
            <div class="large-btn reg-margin" @click="handleEnterGameClick">进入游戏</div>
            <div class="fast-reg-tips">绑定手机可以通过手机号码登录以及找回密码，为了您的账号安全，请尽快绑定手机</div>
        </div>
    </div>
</div>
</template>
<script>
import juheh5Service from '../../../services/juheh5Service';

export default {
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            myValue: this.modelValue,
            generateAccount: true,
            account: '',
            passwrod: '',
        };
    },
    mounted() {
        if (this.generateAccount) {
            this.generateFastAccount();
        } else {
            this.getLocalAccount();
        }
    },
    watch: {
        modelValue: {
            deep: true,
            immediate: true,
            handler(newVal) {
                this.myValue = newVal;
                this.generateAccount = newVal.generateAccount;
            },
        },
        myValue: {
            deep: true,
            handler(newVal) {
                this.handleSyncData();
            },
        },
    },
    methods: {
        handlePrivacyUrlClick() {
            this.myValue.currentComponent = 'Privacy';
            this.myValue.currentComponentTab = '';
            this.myValue.lastComponent = 'FastReg';
            this.myValue.lastComponentTab = '';
        },
        handleEnterGameClick() {
            if (this.account === '' || this.password === '') {
                layer.msg('程序异常，请稍后再试', { time: 1000 });
                return false;
            }

            axios.post('/api/juheh5/account/account_login', {
                account: this.account,
                password: this.password,
                game_id: this.myValue.gameId
            }).then(res => {
                let data = res.data;
                if (data.code != 0) {
                    layer.msg(data.msg, { time: 1000 });
                    return false;
                }

                let info = data.data;
                let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
                localAccountInfo.forEach((item, index) => {
                    if (item.account === info.account) {
                        localAccountInfo.splice(index, 1);
                    }
                });
                localAccountInfo.unshift(info);
                localStorage.setItem('account_info', JSON.stringify(localAccountInfo));

                juheh5Service.loginCb(info)
                return
            }).catch((error) => {
                layer.msg(error, { time: 1000 });
            });

            return false;
        },
        handleBindPhoneClick() {
            this.myValue.currentComponent = 'BindPhone';
            this.myValue.currentComponentTab = '';
        },
        generateFastAccount() {
            axios.post('/api/juheh5/account/fast_reg', {
                game_id: this.myValue.gameId
            }).then(res => {
                let data = res.data;
                if (data.code != 0) {
                    layer.msg(data.msg, { time: 1000 });
                    return false;
                }

                let info = data.data;
                this.account = info.account;
                this.password = info.password;

                let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
                localAccountInfo.unshift(info);
                localStorage.setItem('account_info', JSON.stringify(localAccountInfo));
            }).catch((error) => {
                layer.msg(error, { time: 1000 });
                return false;
            });
        },
        getLocalAccount() {
            let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
            if (localAccountInfo.length !== 0) {
                this.account = localAccountInfo[0].account;
                this.password = localAccountInfo[0].password;
            }
        },
        handleSyncData() {
            this.$emit("update:modelValue", this.myValue);
        },
    },
};
</script>

<style lang="scss" scoped>
.layui-input-block {
    margin-top: 3px;
    margin-left: 0px !important;
}
</style>
